<template>
    <section class="cucoloris clear">
        <div class="cucoloris-top clear">
            <router-link class="fr new-built pointer" to="/alumni/built" tag="div">新建相册</router-link>
            <router-link class="fr mine pointer" to="/alumni/mine" tag="div" replace>我的相册</router-link>
        </div>  
        <ul class="clear" v-if="photograph.data!=0 && photograph!=0">
            <router-link class="fl pointer" v-for="(item,key) in photograph.data" :to="{path:'album',query:{id:item.id}}" :key="key" tag="li">
                <div class="poster">
                    <img :src="BASE_URL+item.pic_cover" alt="相册封面" />
                    <div class="author">
                        <img :src="BASE_URL+item.avatar_path" alt="作者头像" />
                        <span>{{item.username}}</span>
                    </div>
                </div>
                <p>{{item.name}}</p>
            </router-link>
        </ul>
        <el-pagination
            v-if="photograph.data!=0 && photograph!=0"
            background
            :small="true"
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
            :page-size="6"
            :total="photograph.data_sum">
        </el-pagination>
        <div class="empty" v-if="photograph.data==0 || photograph==0">暂时还没有校友剪影哦~</div>
    </section>
</template>

<script>
export default {
	data(){
		return {
            photograph:[],    // 存放获取相册的数组，最多六个相册
		}
	},
    created(){
        // 获取轮播图信息
        this.getPhotograph();

    },
	methods:{
        getPhotograph(page){
            let success = res => {
                // console.log(res.data)
                this.photograph = res.data;
            }

            page = page || 1;

            this.$ajax({
                url: "/api/alumni/alumniPic",
                method: "get",
                params: {
                    status:1,    // 状态，-1：全部；1：正常；2：审核中；3：已拒绝'
                    page_index:page,     // 页码
                    page_size:6,     // 产品要求6个相册
                    data_type:1,    // 0：没有分页 ； 1：有分页
                },
                func: { success: success }
            })
        },
        // 获取对应页码相册的请求
        handleCurrentChange(page){
            this.getPhotograph(page)
        }
	}
}
</script>


<style lang="scss">
    #alumni{
        .news-container{
            .cucoloris{
                position:relative;
                width:962px;
                // min-height:678px;
                background: #fff;
                .cucoloris-top{
                    height:80px;
                    background: url("../../../assets/images/image04.png") center center no-repeat;
                    .new-built{
                        margin:21px 40px 0 0;
                        width:96px;
                        height:36px;
                        font-size: 14px;
                        text-align:center;
                        line-height:36px;
                        color: #FFFFFF;
                        letter-spacing: 0;
                        background: #348EFC;
                        border-radius: 3px;
                    }
                    .mine{
                        margin:29px 40px;
                        line-height:19px;
                        font-size: 14px;
                        color: #6080A6;
                        letter-spacing: 0;
                    }
                }
                &>ul{
                    margin-bottom:98px;
                    margin-left:21px;
                    li{
                        margin:41px 10px 0 0;
                        width:300px;
                        .poster{
                            position:relative;
                            width:300px;
                            height:200px;
                            &>img{
                                width:100%;
                                height:100%;
                                object-fit:cover;
                            }
                            .author{
                                position:absolute;
                                bottom:7px;
                                right:5px;
                                width:75px;
                                height:26px;
                                line-height:26px;
                                font-size: 12px;
                                color: #FFFFFF;
                                letter-spacing: 0;
                                overflow:hidden;
                                text-overflow:ellipsis;
                                white-space:nowrap;
                                &>img{
                                    margin-right:5px;
                                    width:26px;
                                    height:26px;
                                    border-radius:500%;
                                    overflow:hidden;
                                    object-fit:cover;
                                }
                            }
                        }
                        p{
                            margin-top:8px;
                            width:100%;
                            height:19px;
                            line-height:19px;
                            text-overflow:ellipsis;
                            overflow:hidden;
                            white-space:nowrap;

                        }
                    }
                }
                .el-pagination {
                    position:absolute;
                    bottom:30px;
                    left:21px;
                    button{
                        width:30px;
                        height:30px;
                    }
                    .el-pager{
                        .number,.el-icon.more.el-icon-more{
                            min-width:30px;
                            height:30px;
                            line-height:30px;
                            font-size: 14px;
                            color: #606266;
                            letter-spacing: 0;
                            border-radius: 2px;
                            // background: #F0F2F5;
                            &.active{
                                color: #FFFFFF;
                                background: #1989FA;
                            }                                  
                        }
                        .el-icon-d-arrow-left,.el-icon-d-arrow-right{
                            height:30px;
                            line-height:30px;
                        }
                    }

                }
                .empty{
                    padding-top:400px;
                    height:198px;
                    color:#ccc;
                    text-align:center;
                    background: url("../../../assets/images/image05.png") center 167px no-repeat;
                }
            }
        }
    }
</style>